<template>
  <van-nav-bar title="京东商城" />
  <!-- 轮播 -->
  <van-swipe :autoplay="3000" lazy-render>
    <van-swipe-item v-for="image in images" :key="image">
      <img :src="image" width="100%" height="200px" />
    </van-swipe-item>
  </van-swipe>
  <!-- 宫格 -->
  <van-grid :border="true" :column-num="4">
    <van-grid-item>
      <van-image
        src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"
      />
    </van-grid-item>
    <van-grid-item>
      <van-image
        src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg"
      />
    </van-grid-item>
    <van-grid-item>
      <van-image
        src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg"
      />
    </van-grid-item>
    <van-grid-item>
      <van-image
        src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg"
      />
    </van-grid-item>
  </van-grid>
 
</template>

<script setup>
const images = [
  "https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg",
  "https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg",
  "https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg",
  "https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg",
];
</script>

<style></style>
